export const metadata = {
  title: 'Flowing Ribbons Effect',
  description:
    'An interactive React component that adds a dynamic bubble effect, visually tracking cursor movement in real time.',
};

<ComponentCodePreview name='flowing-ribbons' type="separate" />

## Props

| Prop             | Type       | Default      | Description                                                                 |
| ---------------- | ---------- | ------------ | --------------------------------------------------------------------------- |
| `backgroundColor`| `string`   | `'#F0EEE6'`  | Background color of the canvas.                                             |
| `lineColor`      | `string`   | `'#777777'`  | Color of the flowing ribbon lines.                                          |
| `animationSpeed` | `number`   | `0.3`        | Speed of the ribbon flow animation.                                         |
| `removeWaveLine` | `boolean`  | `true`       | Whether to remove the animated wave line (if true, the wave is not shown). |
